<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/base2.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <script src="js/swiper-3.4.2.min.js"></script>
    <script src="js/yang_set_rem.js"></script>
</head>
<body>
<header class="banner">
    <div class="head-box">
        <div class="left-Pic">
            <img src="img/demologo.jpg" alt="">
        </div>
        <div class="logoAnd-text">
            <div class="logoPic">
                <img src="img/brand@3x.png" alt="">
            </div>
            <div class="zpxF">粥品香坊（大运村）</div>
            <div class="clear"></div>
            <div class="distribution">蜂鸟专送/<span>38</span>分钟送达</div>
            <div class="threeText">
                <div class="jian-text">
                    <img src="img/decrease_1@3x.png" alt="">
                </div>
                <div class="three-te">在线支付满28减5，满50减10</div>
            </div>
        </div>
        <div class="num-btn">5个 ></div>
    </div>
</header>
<section class="section">
    <div class="notice">
        <div class="pic-gongG">
            <img src="img/bulletin@3x.png" alt="">
        </div>
        <div class="text-guangG">
            粥品香坊其烹饪粥料擦得秘方源于中国千年古法，再融合现在制作工艺端数据大数据大苏打
            <span class="gongGao-JianTou">&gt;</span>
        </div>
    </div>
    <div class="content-nav">
        <a href="" class="active">商品</a>
        <a href="">评价</a>
        <a href="">商家</a>
    </div>
    <div class="section-body">
        <div class="left-tab">
            <ul>
                <li>热销榜</li>
                <li class="li-active">
                    <div class="active-li">
                        <div class="te-pic">
                            <img src="img/special_3@2x.png" alt="">
                        </div>
                        <span>单人特色套餐</span>
                    </div>
                </li>
                <li>特色粥品</li>
                <li>精选热菜</li>
                <li>爽口凉菜</li>
                <li>半成品</li>
                <li>饭类</li>
                <li>面类</li>
                <li>饮料</li>
            </ul>
        </div>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <div class="right-list">
                        <div class="title">
                            单人特色套餐
                        </div>
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="right-list">
                        <div class="title">
                            特色粥品
                        </div>
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="right-list">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="right-list">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="right-list">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="right-list">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="right-list ">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="right-list">
                        <div class="pic-list-Bigbox">
                            <div class="pic-listBox">
                                <img src="img/demologo.jpg" alt="">
                            </div>
                            <div class="text-list">
                                <div class="firstT">皮蛋瘦肉粥配包子套餐</div>
                                <div class="secondT">咸粥</div>
                                <div class="threeT">月售1132份 好评率100%</div>
                                <div class="goCar"><span class="red">￥24</span>
                                    <del>￥28</del>
                                    <span class="addCart"><img src="img/add.png" alt=""></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer class="footer">
    <div class="bigBlack">
        <div class="round">
            车
        </div>
    </div>
    <div class="price">￥<span>0</span></div>
    <div class="foot-text">另需配送费￥<span>4</span>元</div>
    <div class="jieSuan">￥<span>20</span>起送</div>
</footer>


<script>

  var swiper = new Swiper('.swiper-container', {
//    pagination: '.swiper-pagination',
//    paginationClickable: true,
    direction: 'vertical',
    slidesPerView: 0,
//    observer: true,
//    observeParents: true
  })
  /*nav*/
  //    var swiper = new Swiper('#swiper-container', {
  //      pagination: '.swiper-pagination',

  //      paginationClickable: true,
  //      spaceBetween: 10,
  //      freeMode: true,
  //      observer: true,
  //      observeParents: true
  //    });
</script>
</body>
</html>